<template>
  <div class="hot">
    <div class="hotmusic">
      <!-- <banner></banner> -->
      <div>更新日期:10月23日</div>
    </div>
    <loading v-if="showList.length == 0"></loading>
    <every-music
      :playMUsicID="playMUsicID"
      @play="$emit('play', $event)"
      :songlist="showList"
      :shownum="true"
      v-else
    ></every-music>
    <div ref="bott" class="loadingmore" @click="loadMore">
      {{ this.page >= 5 ? "到底了..." : "加载更多" }}
    </div>
  </div>
</template>

<script>
// import Banner from "@/components/Banner";
import EveryMusic from "@/components/EveryMusic.vue";
export default {
  name: "Hot",
  props: {
    playMUsicID: Number,
  },
  data() {
    return {
      hotList: [],
      page: 1,
    };
  },
  components: {
    EveryMusic,
    // Banner
  },
  created() {
    this.$axios
      .get("/playlist/detail", { params: { id: 3778678 } })
      .then((result) => {
        // console.log("res",result.data.playlist.tracks);
        let musiclist = result.data.playlist.tracks.map((v, index) => {
          v.song = {
            privilege: result.data.privileges[index],
            artists: v.ar,
            album: v.al,
          };
          return v;
        });
        this.hotList = musiclist;
        // console.log("musiclist",musiclist);
      });
  },
  methods: {
    loadMore() {
      if (this.page >= 5) {
        return;
      }
      this.page++;
    },
    windowScroll() {
      if (window.scrollY + window.innerHeight > this.$refs.bott.offsetTop) {
        this.loadMore();
      }
    },
  },
  computed: {
    showList() {
      if (this.hotList.length > 0) {
        let endPos = this.page * 20;
        return this.hotList.slice(0, endPos);
      }
      return [];
    },
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      window.addEventListener("scroll", vm.windowScroll);
    });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("scroll", this.windowScroll);
    next();
  },
};
</script>
<style lang="less" scoped>
.hot {
  width: 100vw;
  .hotmusic {
    width: 100%;
    height: 38.89vw;
    background: url(../assets/hot_music_bg_2x.jpg) no-repeat;
    background-size: cover;
    position: relative;
    div {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 20px;
      &::before {
        content: "";
        display: block;
        width: 142px;
        height: 67px;
        background: url(../assets/index_icon_2x.png) no-repeat;
        background-size: 166px 97px;
        background-position: -25px -30px;
        margin-bottom: 10px;
      }
      font-size: 12px;
      color: white;
    }
    &::after {
      content: "";
      display: inline-block;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.2);
    }
  }
}
.loadingmore {
  text-align: center;
  line-height: 80px;
  color: #888;
}
</style>
